<link rel="stylesheet" th:href="@{admin/plugins/ssi-uploader/styles/ssi-uploader.css}">
<style type="text/css">
    .hidden {
        display: none;
    }
</style>

<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">发布/编辑文章</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a th:href="@{admin}">首页</a></li>
                    <li class="breadcrumb-item active">产品管理</li>
                    <li class="breadcrumb-item active">发布/编辑产品</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- Main content -->
<section class="content">
    <div class="card card-info p-3">
        <form id="productForm" class="row">
            <input th:value="${product?.id}" type="hidden" name="id">
            <div th:unless="${product?.id == null}">
                <input th:value="${product?.lookCount}" type="hidden" name="lookCount">
                <input th:value="${product?.createTime}" type="hidden" name="createTime">
            </div>

<!--            <input id="imgUrl" type="hidden" name="imgUrl" th:value="${product?.imgUrl}">-->
            <div class="col-lg-6 p-3" style="border: 1px solid #ddd;border-radius: 4px;">
                <div class="form-group col-xs-12">
                    <label class="control-label">产品名称:</label>
                    <input type="text" class="form-control" id="proName" name="proName" th:value="${product?.proName}"
                           placeholder="请输入产品名称">
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label">产品生产标准:</label>
                    <input type="text" class="form-control" id="proStandard" name="proStandard" th:value="${product?.proStandard}"
                           placeholder="请输入产品生产标准">
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label">产品重量/按克计重:</label>
                    <input type="text" class="form-control" id="proWeight" name="proWeight" th:value="${product?.proWeight}"
                           placeholder="请输入产品重量">
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label">产品尺寸:</label>
                    <input type="text" class="form-control" id="proSize" name="proSize" th:value="${product?.proSize}"
                           placeholder="请输入产品尺寸">
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label">产品材料:</label>
                    <input type="text" class="form-control" id="proMaterial" name="proMaterial" th:value="${product?.proMaterial}"
                           placeholder="请输入产品材料">
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label">产品颜色:</label>
                    <input type="text" class="form-control" id="proColor" name="proColor" th:value="${product?.proColor}"
                           placeholder="请输入产品颜色">
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label">注意事项:</label>
                    <div class="ml-4">
                                <textarea type="text" rows="2" class="form-control" name="attention"
                                          th:text="${product?.attention}"
                                          placeholder="请输入注意事项"></textarea>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 p-3" style="border: 1px solid #ddd;border-radius: 4px;">
                <div class="form-group col-xs-12">
                    <label class="control-label">产品分类:</label>
                    <select id="typeId" class="form-control"  name="typeId" required>
                        <block th:each="types: ${typeList}">
                            <option th:if="${#lists.isEmpty(types.children)}" th:value="${types.id}" th:label="${types.typeName}" th:selected="${product?.typeId == types.id}"></option>
                            <optgroup th:unless="${#lists.isEmpty(types.children)}" th:label="${types.typeName}">
                                <option th:each="child: ${types.children}" th:value="${child.id}" th:label="${child.typeName}" th:selected="${product?.typeId == child.id}"></option>
                            </optgroup>
                        </block>
                    </select>
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label label-four">产品缩略图:</label>
                    <div class="input-group">
                        <input type="text" class="form-control" name="imgUrl" id="imgUrl"
                               th:value="${product?.imgUrl}"
                               placeholder="产品缩略图地址">
                        <div id="upload-img-btn" class="btn btn-default input-group-btn" style="min-width: 50px">
                            <i class="fas fa-cloud-upload-alt"></i>
                        </div>
                    </div>
                </div>
                <div id="upload-cover-content" class="form-group col-md-12 hidden">
                    <div class="upload-item">
                        <p class="upload-title">缩略图</p>
                        <div th:if="${product.imgUrl}!=null">
                            <img th:src="${product?.imgUrl}" width="150px" height="auto" title="原上传图片">
                        </div>
                        <p class="upload-file"><i class="fa fa-cloud-upload fz-70"></i></p>
                        <p class="upload-btns"><a type="button"
                                                  class="btn btn-sm btn-block btn-info coverUploader">上传</a>
                        </p></div>
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label">产品介绍:</label>
                    <div class="ml-4">
                                <textarea type="text" rows="2" class="form-control" name="proInfo"
                                          th:text="${product?.proInfo}"
                                          placeholder="请输入产品介绍"></textarea>
                    </div>
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label">产品特点:</label>
                    <div class="ml-4">
                            <textarea type="text" rows="2" class="form-control" name="proFeature"
                                      th:text="${product?.proFeature}"
                                      placeholder="请输入产品特点"></textarea>
                    </div>
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label">产品作用:</label>
                    <div class="ml-4">
                            <textarea type="text" rows="2" class="form-control" name="proEffect"
                                      th:text="${product?.proFeature}"
                                      placeholder="请输入产品作用"></textarea>
                    </div>
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label">是否上架:</label>
                    <div class="ml-3">
                        <div class="icheck-primary icheck-inline">
                            <input type="radio" id="lock_on" name="islock" value="1"
                                   th:field="*{product.islock}"/>
                            <label for="lock_on">是</label>
                        </div>
                        <div class="icheck-primary icheck-inline">
                            <input type="radio" id="lock_off" name="islock" value="0"
                                   th:field="*{product.islock}"/>
                            <label for="lock_off">否</label>
                        </div>
                    </div>
                </div>
                <div class="form-group mt-4">
                    <div class="row">
                        <button type="button" th:if="${product?.id == null}" class="btn btn-primary btn-lg col-md-4 offset-1"
                                onclick="addOrUpdateproduct(1, true)">保存产品信息
                        </button>
                        <button type="button" th:unless="${product?.id == null}" class="btn btn-primary btn-lg col-md-4 offset-2"
                                onclick="addOrUpdateproduct(0, false)">更新产品信息
                        </button>
                    </div>
                </div>
            </div>
        </form>
            <div th:if="${product?.id == null}">
                <div class="col-lg-12 p-3" style="border: 1px solid #ddd;border-radius: 4px;">
                <label class="control-label">请先保存产品信息后上传产品的详情图片</label>
                </div>
            </div>

            <div th:unless="${product?.id == null}">
                <form  class="row">
                <div class="col-lg-6 p-3" style="border: 1px solid #ddd;border-radius: 4px;">
                    <div class="form-group col-xs-12">
                        <label class="control-label">上传产品展示图</label>
                        <div class="ml-4">
                            <input type="file" name="ssi-upshow" multiple id="ssi-upshow"/>
                        </div>
                    </div>
                    <div class="form-group col-xs-12">
                        <ul th:each="show: ${showList}">
                            <li>
                                <img th:src="${show?.proImg}" width="300px" height="auto">
                                <button style="border-radius: 3px;"  type="button" class="btn-mini btn-danger" th:onclick="delImg([[${show.id}]])">删除</button>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-6 p-3" style="border: 1px solid #ddd;border-radius: 4px;">
                    <div class="form-group col-xs-12">
                        <label class="control-label">上传产品详情图</label>
                        <div class="ml-4">
                            <input type="file" name="ssi-updetail" multiple id="ssi-updetail"/>
                        </div>
                    </div>
                    <div class="form-group col-xs-12">
                        <ul th:each="detail: ${detailList}">
                            <li>
                                <img th:src="${detail?.proImg}" width="300px" height="auto"/>
                                <button style="border-radius: 3px;"  type="button" class="btn-mini btn-danger" th:onclick="delImg([[${detail.id}]])">删除</button>
                            </li>
                        </ul>
                    </div>
                </div>
                </form>
             </div>


    </div>
</section>
<script th:src="@{admin/plugins/ssi-uploader/js/ssi-uploader.js}"></script>
<!--<script>-->
<!--    if (CKEDITOR.env.ie && CKEDITOR.env.version < 9)-->
<!--        CKEDITOR.tools.enableHtml5Elements(document);-->

<!--    CKEDITOR.config.height = 1000;-->
<!--    CKEDITOR.config.width = 'auto';-->
<!--    CKEDITOR.replace('productField')-->
<!--</script>-->
<script>


    $('#ssi-upshow').ssi_uploader({
        url: '/product/upload',
        dropZone: false,
        onUpload:function(response){
            window.location.reload();
            layer.msg('show complete');
        }
    });
    $('#ssi-updetail').ssi_uploader({
        url: '/product/upload',
        dropZone: false,
        onUpload:function(response){
            window.location.reload();
            layer.msg('detail complete');
        }
    });
    function delImg(imgid) {
        Core.confirm("确认删除该图片？", function () {
            Core.postAjax("/product/del_img", {"imgid": imgid}, function (data) {
                if (data.status === 200) {
                    window.location.reload();
                }
                layer.msg(data.msg)
            })
        })
    }



    function addOrUpdateproduct(status,addFlag) {
        if (validproduct()) {
            if (addFlag&&status==1) {
                Core.confirm("确认保存产品信息？", function () {
                    Core.postAjax("/product/save", $("#productForm").serialize(), function (data) {
                        if (data.status === 200) {
                            window.location.href = "#product/edit?id=" + data.data;
                        }
                        layer.msg(data.msg)
                    })
                })
            } else {
                Core.confirm("确认更新产品信息？", function () {
                    Core.postAjax("/product/update", $("#productForm").serialize(), function (data) {
                        if (data.status === 200) {
                            window.location.href = "#product/list"
                        }
                        layer.msg(data.msg)
                    })
                })
            }

        }
    }

    function validproduct() {
        var proName = document.getElementById("proName").value;
        if (proName==null||proName==""){
            layer.msg("请输入产品名称！")
            return false;
        }
        var typeId = document.getElementById("typeId").value;
        if (typeId==null||typeId==0){
            layer.msg("请选择产品分类！")
            return false;
        }
        var islock = document.getElementsByName("islock");
        var count=0;
        for (let i=0;i<islock.length;i++){
            if (!islock[i].checked){
              count++;
            }
        }
        if (count==2){
            layer.msg("请选择产品上下架状态！")
            return false;
        }

        var imgUrl = document.getElementById("imgUrl").value;
        if (imgUrl==null||imgUrl==""){
            layer.msg("请上传产品缩略图！")
            return false;
        }

        return true;
    }

    $(function () {
        /*上传图片*/
        $("#upload-img-btn").click(function () {
            $('#upload-cover-content').toggle()
            $(".coverUploader").upload({
                server: '[[@{/attachment/upload}]]',
                swf: '/admin/img/Uploader.swf',
                imgAccept: true
            }, function (url, picker) {
                $("#imgUrl").val(url);
                echoGtUploadResMethd(url, picker);
            });
        })

    })
</script>
